<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>client</title>
    <link href="favicon.ico" ref="short icon">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="dialogAddFormVisible = true">添加应用</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%">

        <el-table-column
                type="index"
                width="50">
        </el-table-column>

        <el-table-column
                prop="clientId"
                label="应用标识"
                width="150">
        </el-table-column>

        <el-table-column
                prop="clientName"
                label="应用名称"
                width="150">
        </el-table-column>

        <el-table-column
                prop="webServerRedirectUri"
                label="回调地址"
                width="300">
        </el-table-column>

        <el-table-column
                prop="authorizedGrantTypes"
                label="oauth授权方式"
                width="300">
        </el-table-column>

        <el-table-column
                prop="autoapprove"
                label="自动审批"
                width="120">
        </el-table-column>

        <!--    <el-table-column-->
        <!--        label="令牌时效(s)"-->
        <!--        width="300">-->
        <!--    </el-table-column>-->
        <!--    <el-table-column-->
        <!--        label="刷新时效(s)"-->
        <!--        width="120">-->
        <!--    </el-table-column>-->

        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <!--        <el-button type="text" size="small">编辑</el-button>-->
                <el-button type="text" size="small" @click="deleteClient(scope.row.clientId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="添加应用" :visible.sync="dialogAddFormVisible" @close="closeAddForm"
               :close-on-click-modal="false">
        <el-form :model="addForm" ref="addForm">
            <el-form-item label="应用标识" label-width="120px">
                <el-input v-model.trim="addForm.clientId"></el-input>
            </el-form-item>
            <el-form-item label="应用名称" label-width="120px">
                <el-input v-model.trim="addForm.clientName"></el-input>
            </el-form-item>
            <el-form-item label="应用秘钥" label-width="120px">
                <el-input v-model.trim="addForm.clientSecret"></el-input>
            </el-form-item>
            <el-form-item label="回调地址" label-width="120px">
                <el-input v-model.trim="addForm.webServerRedirectUri"></el-input>
            </el-form-item>
            <el-form-item label="授权模式" label-width="120px">
                <el-checkbox-group v-model="addForm.authorizedGrantTypes">
                    <el-checkbox label="authorization_code" name="authorizedGrantTypes">授权码模式</el-checkbox>
                    <el-checkbox label="password" :disabled="true" name="authorizedGrantTypes">密码模式</el-checkbox>
                    <el-checkbox label="client_credentials" :disabled="true" name="authorizedGrantTypes">客户端模式
                    </el-checkbox>
                    <el-checkbox label="implicit" :disabled="true" name="authorizedGrantTypes">简化模式</el-checkbox>
                    <el-checkbox label="refresh_token" name="authorizedGrantTypes">刷新Token</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="自动审批" label-width="120px">
                <el-switch v-model="addForm.autoapprove"></el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddForm">取 消</el-button>
            <el-button type="primary" @click="submitAddForm">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //增
                dialogAddFormVisible: false,
                //查
                dialogViewFormVisible: false,
                //改
                dialogEditFormVisible: false,
                tableData: [],

                addForm: {
                    clientId: "",
                    clientName: "",
                    authorizedGrantTypes: []
                },
                editForm: {},
            }
        },
        created() {
            this.queryList();
        },
        methods: {
            queryList() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$http.post('http://127.0.0.1:7033/client/mgr/list', {}).then(res => {
                    loading.close();
                    if (res.status == '200') {
                        this.tableData = res.body;
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.statusText
                        });
                    }
                }).catch(res => {

                })
            },
            submitAddForm() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                loading.close();
                let param = this.addForm;
                param.authorizedGrantTypes = param.authorizedGrantTypes.join();
                console.log("param:", JSON.stringify(param))
                this.$http.post('http://127.0.0.1:7033/client/mgr/add', param).then(res => {
                    loading.close();
                    console.log("res:", JSON.stringify(res))
                    if (res.status == '200') {
                        this.closeAddForm();
                        this.queryList();
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.statusText
                        });
                    }
                })
            },
            closeAddForm() {
                this.addForm = {};
                this.dialogAddFormVisible = false;
            },
            deleteClient(clientId) {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$http.post('http://127.0.0.1:7033/client/mgr/delete?clientId=' + clientId, {}).then(res => {
                    loading.close();
                    console.log("res:", JSON.stringify(res))
                    if (res.status == '200') {
                        this.tableData = res.body;
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.statusText
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>